<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pt-[12px] overflow-auto"
    >
      <el-form-item label="国家" prop="country">
        <el-select
          v-model="form.country"
          placeholder="请选择"
          filterable
          clearable
          class="!w-[150px]"
        >
          <el-option
            v-for="item in taskConfigStore.allCountryList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="文件类型" prop="fileType">
        <el-select
          v-model="form.fileType"
          placeholder="请选择"
          clearable
          class="!w-[150px]"
        >
          <el-option value="INPUT" label="上传文件" />
          <el-option value="OUTPUT" label="下载文件" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      show-overflow-tooltip
      stripe
      border
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="service_type" label="服务类型" align="center" />
      <el-table-column prop="count" label="数量" align="center" />
      <el-table-column prop="total_size" label="文件大小" align="center" />
    </el-table>
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 40, 50]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Refresh from "@iconify-icons/ep/refresh";
import { getFilesByService } from "@/api/adminFileApi";
import { useTaskConfigHook } from "@/store/modules/taskConfig";

const taskConfigStore = useTaskConfigHook();
const formRef = ref();
const loading = ref(false);
const form = reactive({
  fileType: "",
  country: ""
});
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1
});
const tableData = ref([]);

async function onSearch() {
  const params = {
    page: pagination.currentPage,
    size: pagination.pageSize,
    ...form
  };
  const { data } = await getFilesByService(params);
  const { items, total } = data;
  tableData.value = items;
  pagination.total = total;
}
const handleSizeChange = (val: number) => {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  onSearch();
};
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  onSearch();
};
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  pagination.currentPage = 1;
  onSearch();
};
onMounted(() => {
  onSearch();
});
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  background-color: #fff;
  .el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
  }
}
</style>
